<!-- author: 薛皓文 -->
<!-- date: 2025-01-31 20:44:06 -->
<!-- description: 地图事例 -->
<template>
    <view class="container" ref="allContainer">
        <map ref="target" :style="`width: 100%; height:${height}rpx;
  `" :scale="scale" :latitude="formData.weid"
            :longitude="formData.jingd" :markers="covers">
        </map>

        <view class="container-box"
            :style="`width: 100%; height:calc(100% - ${height}rpx); opacity:${opacity};background:red;
  transition: all 0.2s ease-in-out;`"
            ref="container">
            <div style="height: 90rpx; background: yellow;">
                sadasdasdasd
            </div>


        </view>
    </view>
</template>
<script setup>
import { reactive, toRefs, ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useSwipe } from '@vueuse/core'
const state = reactive({
    // 地图
    covers: [],  //标记点用于在地图上显示标记的位置

    scale: 16,
    formData: {
        oldFjpicList: [],
        jingd: 0,//经度
        weid: 0,//纬度
        dkDizh: '',//打卡地址
    },


})
const { scale, formData, nowTime, intervalId, covers, uploadShow, alertShow, showData } = toRefs(state);
// const el = useTemplateRef('el')

const target = ref(null)
const container = ref(null)
const allContainer = ref(null)
//qpp 获取不到 offsetHeight
const containerHeight = computed(() => container.value?.$el?.offsetHeight)
const allContainerHeight = computed(() => allContainer.value?.$el?.offsetHeight)
const height = ref('380')
const height1 = ref(true)
const opacity = ref(1)

function reset() {
    height.value = '380'
    height1.value = `380`
}

const { direction, isSwiping, lengthX, lengthY } = useSwipe(
    container,
    {
        passive: false,
     
        onSwipe(e) {

            console.log(containerHeight.value);


            // if (containerHeight.value) {
                if (lengthY.value < 0) {

                    height.value = `500`
                    height1.value = `380`
                }
                else {
                    reset()

                }
            // }
            // console.log(height.value, 'onSwipe');
        },
        onSwipeEnd(e, direction) {
            // console.log(height.value, 'onSwipeEnd--1');
            // if (lengthY.value < 0 && containerHeight.value && height.value == '500') {

            //     height.value = `500`
            // }
            // else {
            //     reset()


            // }
            // console.log(height.value, 'onSwipeEnd');
        },
    },
)
const { } = toRefs(state);
//获取地址
const getLocationFun = () => {

    uni.getLocation({
        type: 'gcj02',
        geocode: "true",
        isHighAccuracy: "true",
        accuracy: "30", // 精度值为20m
        success: (res) => {
            console.log(res)
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
            formData.value.jingd = res.longitude
            formData.value.weid = res.latitude

            //#ifdef APP-PLUS
            var point = new plus.maps.Point(res.longitude, res.latitude);
            plus.maps.Map.reverseGeocode(
                point,
                {},
                function (event) {
                    var address = event.address; // 转换后的地理位置
                    var point = event.coord; // 转换后的坐标信息
                    var coordType = event.coordType; // 转换后的坐标系类型

                    var reg = /.+?(省|市|自治区|自治州|县|区)/g;


                    // formData.value.addressList = address.match(reg).toString().split(",");
                    formData.value.dkDizh = address


                },
                function (e) { }
            );
            //#endif
            formData.value.latitude = res.latitude
            formData.value.weid = res.latitude
            formData.value.longitude = res.longitude
            formData.value.jingd = res.longitude
            covers.value = [{
                latitude: res.latitude,
                longitude: res.longitude,
                iconPath: '../../static/images/location.png', //地图上的图标
                width: 100, //宽
                height: 100, //高
                callout: { //自定义标记点上方的气泡窗口 点击有效  
                    content: formData.value.dkDizh, //文本
                    color: '#ffffff', //文字颜色
                    fontSize: 14, //文本大小
                    borderRadius: 2, //边框圆角
                    bgColor: '#00c16f', //背景颜色
                    display: 'ALWAYS', //常显
                    padding: 5  //气泡窗口的内间距
                },
            }]
        },
        fail: (err) => {
            console.log(err)
        }
    })
}
onLoad(() => {
    getLocationFun();
});
</script>
<style lang="scss" scoped>
.container {
    height: 100%;
}
</style>
